
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      myMap
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="card-background-page" id="main">

  <ion-card style='background-color:#0039a4;  opacity: .8;'>
    <ion-card-header style="text-align:center; color:white">
      Welcome to your world!
    </ion-card-header>
   

  </ion-card>
  <ion-button class="pos" (click)='reward()'>Rewards</ion-button>
  <ion-button class="pos1" (click)='tasks()'>Tasks</ion-button>

  <ion-slides  style="opacity: .92; background: white; color:aqua; ">
    <ion-slide   >
      <ion-card style='background-color: white'>
        <ion-card-header>
          <ion-card-subtitle>Start</ion-card-subtitle>
          <ion-card-title>Level 1</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          Once you've completed tasks you can level up.
          When you get to certain levels, you obtain new rewards!
        </ion-card-content>
      </ion-card>
      <br>
      <br>

      <img src="assets/boy3.png" alt="no image" style="position: sticky; height:10rem">
    </ion-slide>
    <ion-slide style="background: white; color:aqua; width:100%; height:50%">
      <ion-card style="width:100%; height:50%;">
        <ion-card-header>
          <ion-card-subtitle>Level Up!</ion-card-subtitle>
          <ion-card-title>Level 2</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          Congrats! You've earned 50 stars ⭐!
          <!-- <img src="assets/blue cape.jpg" alt="no image"> -->
        </ion-card-content>
      </ion-card>
      <br>
      <br>

      <img src="assets/boy3.png" alt="no image" style="position: sticky; height:10rem">

    </ion-slide>
    <ion-slide>
      <ion-card style="width:100%; height:50%;">
        <ion-card-header>
          <ion-card-subtitle>You Leveled Up!</ion-card-subtitle>
          <ion-card-title>Level 3</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          You've reached level 3! That much closer to leaving the island!
        </ion-card-content>
      </ion-card>
      <br>
      <br>

      <img src="assets/boy3.png" alt="no image" style="position: sticky; height:10rem">
    </ion-slide>
    <ion-slide>
      <ion-card style="width:100%; height:50%;">
        <ion-card-subtitle>You Leveled UP!</ion-card-subtitle>
        <ion-card-title>Level 4</ion-card-title>
        <ion-card-header>
          <ion-card-content>You have reached level 4 here are 70 stars. Collect stars to obtain new rewards.
          </ion-card-content>
        </ion-card-header>
      </ion-card>
      <br>
      <br>

      <img src="assets/boy3.png" alt="no image" style="position: sticky; height:10rem">
    </ion-slide>
    <ion-slide>
      <ion-card style="width:100%; height:50%;">
        <ion-card-subtitle>You Leveled UP!</ion-card-subtitle>
        <ion-card-title>Level 5</ion-card-title>
        <ion-card-header>
          <ion-card-content> YAY! Now we've made it back to the hotel and unlocked a new map </ion-card-content>
        </ion-card-header>
      </ion-card>
      <br>
      <br>

      <img src="assets/boy3.png" alt="no image" style="position: sticky; height:10rem">
    </ion-slide>
    <ion-slide>
      <ion-card style="width:100%; height:50%;">
        <ion-card-subtitle>You Leveled UP!</ion-card-subtitle>
        <ion-card-title>Level 6</ion-card-title>
        <ion-card-header>
          <ion-card-content>You have reached level 6 here are 10 stars.Collect stars to obtain new rewards.
          </ion-card-content>
        </ion-card-header>
      </ion-card>
      <br>
      <br>

      <img src="assets/boy3.png" alt="no image" style="position: sticky; height:10rem">
    </ion-slide>
    <ion-slide>
      <ion-card style="width:100%; height:50%;">
        <ion-card-subtitle>You Leveled UP!</ion-card-subtitle>
        <ion-card-title>Level 7</ion-card-title>
        <ion-card-header>
          <ion-card-content>You have reached level 7 here are 10 stars.Collect stars to obtain new rewards.
          </ion-card-content>
        </ion-card-header>
      </ion-card>
      <br>
      <br>

      <img src="assets/boy3.png" alt="no image" style="position: sticky; height:10rem">
    </ion-slide>
    <ion-slide>
      <ion-card style="width:100%; height:50%;">
        <ion-card-subtitle>You Leveled UP!</ion-card-subtitle>
        <ion-card-title>Level 8</ion-card-title>
        <ion-card-header>
          <ion-card-content>You have reached level 8 here are 10 stars.Collect stars to obtain new rewards.
          </ion-card-content>
        </ion-card-header>
      </ion-card>
      <br>
      <br>

      <img src="assets/boy3.png" alt="no image" style="position: sticky; height:10rem">
    </ion-slide>
    <ion-slide>
      <ion-card style="width:100%; height:50%;">
        <ion-card-subtitle>You Leveled UP!</ion-card-subtitle>
        <ion-card-title>Level 9</ion-card-title>
        <ion-card-header>
          <ion-card-content>You have reached level 9 here are 30 stars.Collect stars to obtain new rewards.
          </ion-card-content>
        </ion-card-header>
      </ion-card>
      <br>
      <br>

      <img src="assets/boy3.png" alt="no image" style="position: sticky; height:10rem">
    </ion-slide>
    <ion-slide>
      <ion-card style="width:100%; height:50%;">
        <ion-card-subtitle>You Leveled UP!</ion-card-subtitle>
        <ion-card-title>Level 10</ion-card-title>
        <ion-card-header>
          <ion-card-content>You have reached level 10. You have earned a new character! Go to the character customizer
            to change characters. </ion-card-content>
        </ion-card-header>
      </ion-card>
      <br>
      <br>

      <img src="assets/boy3.png" alt="no image" style="position: sticky; height:10rem">
    </ion-slide>
  </ion-slides>
    <!-- <ion-slides>
      
      <ion-slide style="background: white; color:aqua;">
       
        <ion-card>
          <ion-card-header>
            <ion-card-subtitle>Start</ion-card-subtitle>
            <ion-card-title>Level 1</ion-card-title>
          </ion-card-header>
            <ion-card-content>
              Continue to complete tasks and you can level up. 
              When you get to certain levels, you obtain new rewards!
          </ion-card-content>
        </ion-card>
      </ion-slide>
      <ion-slide style="background: white; color:aqua; width:100%; height:50%">
    
        <ion-card style="width:100%; height:50%;">
          <ion-card-header>
            <ion-card-subtitle>Level Up!</ion-card-subtitle>
            <ion-card-title>Level 2</ion-card-title>
          </ion-card-header>
            <ion-card-content>
              Congrats on getting to level2! Here is a reward!
              
            </ion-card-content>
        </ion-card>
       
        
      </ion-slide>
      <ion-slide>
        <ion-card style="width:100%; height:50%;">
          <ion-card-header>
            <ion-card-subtitle>You Leveled Up!</ion-card-subtitle>
            <ion-card-title>Level 3</ion-card-title>
          </ion-card-header>
            <ion-card-content>
              You've reached level 3! 
              Here is a new reward.
            </ion-card-content>
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card style="width:100%; height:50%;">
          <ion-card-subtitle>You Leveled UP!</ion-card-subtitle>
          <ion-card-title>Level 4</ion-card-title>
          <ion-card-header>
            <ion-card-content>You have reached level 4 here are 10 stars.Collect stars to obtain new rewards. </ion-card-content>
          </ion-card-header>
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card style="width:100%; height:50%;">
          <ion-card-subtitle>You Leveled UP!</ion-card-subtitle>
          <ion-card-title>Level 5</ion-card-title>
          <ion-card-header>
            <ion-card-content>You have reached level 5 you have earned a mask! Go back to your character customization to try it on. </ion-card-content>
          </ion-card-header>
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card style="width:100%; height:50%;">
          <ion-card-subtitle>You Leveled UP!</ion-card-subtitle>
          <ion-card-title>Level 6</ion-card-title>
          <ion-card-header>
            <ion-card-content>You have reached level 6 here are 10 stars.Collect stars to obtain new rewards. </ion-card-content>
          </ion-card-header>
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card style="width:100%; height:50%;">
          <ion-card-subtitle>You Leveled UP!</ion-card-subtitle>
          <ion-card-title>Level 7</ion-card-title>
          <ion-card-header>
            <ion-card-content>You have reached level 7 here are 10 stars.Collect stars to obtain new rewards. </ion-card-content>
          </ion-card-header>
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card style="width:100%; height:50%;">
          <ion-card-subtitle>You Leveled UP!</ion-card-subtitle>
          <ion-card-title>Level 8</ion-card-title>
          <ion-card-header>
            <ion-card-content>You have reached level 8 here are 10 stars.Collect stars to obtain new rewards. </ion-card-content>
          </ion-card-header>
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card style="width:100%; height:50%;">
          <ion-card-subtitle>You Leveled UP!</ion-card-subtitle>
          <ion-card-title>Level 9</ion-card-title>
          <ion-card-header>
            <ion-card-content>You have reached level 9 here are 30 stars.Collect stars to obtain new rewards. </ion-card-content>
          </ion-card-header>
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card style="width:100%; height:50%;">
          <ion-card-subtitle>You Leveled UP!</ion-card-subtitle>
          <ion-card-title>Level 10</ion-card-title>
          <ion-card-header>
            <ion-card-content>You have reached level 10. You have earned a new character! Go to the character customizer to change characters.  </ion-card-content>
          </ion-card-header>
        </ion-card>
      </ion-slide>
    </ion-slides> -->

  </ion-content>